<template>
	<view class="a">
		<view class="left">
			<u-line></u-line>
			<view class="left-list" v-for="(item, index) in areaList" :key="index">
				<view class="item" @click="clickarea(item)" >
					<view :class="[selected==item?'active':'']">
						<text >{{item}}</text>
					</view>
					<u-line></u-line>
				</view>
			</view>
		</view>
		<view class="right">
			<view class="units-list" v-for="(item,index) in unitsList" :key="index">
				<view class="card">
					<view class="card-left">
						<view class="units">
							名称：{{item.units}}
						</view>
						<view class="address">
							地址：{{item.address}}
						</view>
					</view>
					<view class="card-right">
						<u-icon name="phone" color="#2979ff" size="28" @click="callPhone(item.phoneNum)"></u-icon>
						<text>{{item.phoneNum}}</text>
					</view>
				</view>
				<u-line></u-line>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import{getListByArea} from '../../config/api.js'
	export default {
		data() {
			return {
				areaList: [
					'行政/事业',
					'富阳镇',
					'白沙镇',
					'莲山镇',
					'古城镇',
					'福利镇',
					'麦岭镇',
					'葛坡镇',
					'城北镇',
					'朝东镇',
					'新华乡',
					'石家乡',
					'柳家乡',
				],
				unitsList:[],
				selected:null
			}
		},
		onLoad() {
			this.clickarea('行政/事业')
		},
		methods:{
			clickarea(item){
				this.selected = item
				getListByArea({
					area: item
				}).then(res=>{
					this.unitsList = res.data.data
				})
			},
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.a{
	display: flex;
	.left{
		width: 20%;
		border-right: #dddddd 1rpx solid ;
		.item{
			line-height: 80rpx;
			text-align: center;
			.active{
				color: #fff;
				background-color: #1296db;
			}
		}
		
	}
	.right{
		width: 80%;
		padding-left: 6rpx;
		.units-list{
			.card-right{
				display: flex;
			}
		}
	}
	
}
</style>